<template>
  <div>
    <div class="node" v-has="{action: 'equipmentExtraSichuansheng:list', effect: 'move'}">
    <Panel title="充电桩扩展信息列表" useBack>
      <div slot='ext' class="examine">
        <el-button size="mini" v-has="{action: 'equipmentExtraSichuansheng:add', effect: 'move'}" class="button-offt" type="success" icon="el-icon-plus" @click="()=>updateExtend()">新增</el-button>
      </div>
    <TableEncapsulation
      slot="body"
      :tableConfig="tableConfig"
      :tableData="tableData"
    >
    <template slot="operation" slot-scope="operation">
          <el-button 
          v-has="{action: 'equipmentExtraSichuansheng:update', effect: 'move'}"
          type="text" @click="()=>updateExtend(operation.row.id, operation.row.pileName)">编辑扩展信息</el-button>
        </template>
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
    </TableEncapsulation>
    </Panel>
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'equipmentExtraSichuansheng:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import SearchSelect from "@/components/SearchSelect";
import { objectFilter } from "@/tools/array";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
export default {
  name: "pileextendlist",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
    SearchSelect,
    ModifyForm,
    ModalPanel
  },
  data() {
    return {
      tableData: [],
      siteList: [],
      searchs: {
        component: 'pile',
        site:"",
        sn: '',
        name: '',
        deviceId:'',
        type:'',
        state:'',
      },
      // selectValue: [],
      // loading:false,
      deviceList:[],
      pager: {
        component: 'pile',
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      operation: true,
    };
  },
  mounted() {
    this.getPile();
  },
  computed: {
    tableConfig () {
      return {
        selection: false,
        columnConfig: [
          {
            label: "名称",
            type: "text",
            prop: "pileName",
            align: "center"
          },
          {
            label: "设备分类",
            type: "other",
            prop: "equipmentClassification",
            align: "center",
            fnc: val => val==1  ? '车辆充电设备':  val==2  ? '换电站内的电池箱充电设备':'',
          },
          {
            label: "辅助电源",
            type: "other",
            prop: "equipmentClassification",
            align: "center",
            fnc: val => val==1  ? '12V':  val==2  ? '24V': '兼容12V和24V',
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:180
          }
        ].filter(Boolean)
        }
    }
  },
  methods: {
    async getData() {
      let current = this.pager.current
      let size = this.pager.size
      let search = objectFilter({current, size })
      const res = await request({
        url: "/manage/connector/extra/sichuansheng/query",
        method: "POST",
        data:  search
      });
      this.tableData = res.page.records
      this.pager.total = res.page.total
      this.pager.current = res.page.current
    },
    pageChange(val) {
      this.pager.current = val;
      this.getPile();
    },
    searchSelect(key, val){
      this.searchs[key] = val;
      this.pager.current = 1;
      this.getPile()
    },
    
    changeSearch(key, val) {
      this.searchs[key] = val;
      this.pager.current = 1;
    },
    updateExtend(id, name){
      this.$router.push({ path: "/extra/gun/province/info", query:{id,name}})
    },
  }
}
</script>
<style lang='scss' >

</style>